<!DOCTYPE html>
<html ng-app="MyApp">
<head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div>
    <div class="container" ng-controller="MyController">
        <div class="my-info">
            父级名字是：{{name}}<span ng-bind="name"></span><br/>
            父级年龄是：<span ng-bind="age"></span><br />
        </div>
        <div class="my-directive" my-directive my-name="{{name}}" age="age" change-my-age="changeAge()"></div>
    </div>
</div>
<script>
    angular.module("MyApp", [])
        .controller("MyController", function($scope) {
            $scope.name = "dreamapple";
            $scope.age = 20;
            $scope.changeAge = function() {
                $scope.age = 0;
            }
        })
        .directive("myDirective", function() {
            return {
                restrict: "AE",
                scope: {
                    dname: '@myName',
                    //--@数据是单向的;@myName中的myName是指令上面的my-name;{{name}}是父级里面的$scope.name="dreamapple";;dname是指令template中需要绑定的ng-bind="dname";父级可以改变子集数据,子集数据改变,父级是不会改变数据的
                    dage: '=age',
                    //--=数据是双向的;=age中的age是指令上面的age;"age"是父级里面的$scope.age = 20;dage是指令tempalte中需要绑定的ng-bind='dage';父级可以改变子集数据,子集数据改变父级也会数据的
                    ch: '&changeMyAge'
                    //--&changeMyAge传递的是方法;&changeMyAge中的changeMyAge是指令上面的change-my-age;"changeAge()"是指父级里面的$scope.changeAge方法;ch是指令tempalte中需要绑定的ng-click='ch()';
                },
                replace: true,
                template: "<div class='my-directive'>" +
                "<h3>下面部分是我们创建的指令生成的</h3>" +
                "子集名字是(这里使用@:所以可以看到父级名字没有改变)：<span ng-bind='dname'></span><br/>" +
                "在这里修改名字：<input type='text' ng-model='dname'><br/>" +
                    "<hr>"+
                "子集年龄是(这里使用=:所以可以看到父级年龄也改变了)：<span ng-bind='dage'></span><br/>" +
                "在这里修改年龄：<input type='text' ng-model='dage'><br/>" +
                "<button ng-click='ch()'>修改年龄</button>" +
                " </div>"
            }
        });
</script>

</body>
</html>